<template>
  <BasicModal @register="registerModal" width="950px" :title="t(title)" @ok="handleSubmit">
  <div class="root-div">
    <div class="chart-setting-panel">
      <div
        v-show="instance['showSetting']"
        class="el-icon-setting panel-button"
        title="图形配置"
        @click="show"
      />
    </div>
    <el-dialog
      v-dialogDrag
      title="图形显示配置"
      width="700px"
      :visible="showPanel"
      :append-to-body="true"
      :modal="false"
      custom-class="setting-panel"
      :close-on-click-modal="false"
      @close="hide"
    >
      <div style="text-align: center;margin-bottom:15px">
        <el-radio-group v-model="activeIndex" size="small" @input="activeChange">
          <el-radio-button label="all">
            总体设置
          </el-radio-button>
          <el-radio-button label="title">
            标题设置
          </el-radio-button>
          <el-radio-button v-if="chartType != 'map'" label="legend">
            图例设置
          </el-radio-button>
          <el-radio-button v-if="chartType != 'map'" label="pic">
            图形设置
          </el-radio-button>
        </el-radio-group>
      </div>
      <template v-if="activeIndex == 'all'">
        <el-form size="mini" inline label-width="120px"
                 style="text-align: left;"
        >
          <el-row>
            <el-form-item label="图形对齐">
              <el-radio v-model="staticSettings.picAlign" label="left">左对齐</el-radio>
              <el-radio v-model="staticSettings.picAlign" label="center">居中</el-radio>
              <el-radio v-model="staticSettings.picAlign" label="right">右对齐</el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="图形大小">
              <el-input v-model="settings.boxWidth" style="width: 100px">
                <template slot="prepend">
                  宽
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="settings.boxHeight" style="width: 100px">
                <template slot="prepend">
                  高
                </template>
              </el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="线条边框">
              <el-input-number v-model="staticSettings.borderSize" style="width:100px" label="请输入边框大小" :min="0" />
            </el-form-item>
            <el-form-item label="线条颜色">
              <el-color-picker v-model="staticSettings.borderColor" default-color="#fff" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="背景颜色">
              <el-color-picker v-model="staticSettings.picColor" default-color="#fff" />
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template v-if="activeIndex == 'title'">
        <el-form size="mini" inline label-width="100px"
                 style="text-align: left;"
                 :class="{'disabledFont':!settings.titleShow}"
                 :disabled="!settings.titleShow"
        >
          <el-row>
            <el-form>
              <el-form-item style="margin-left:36px">
                <el-radio v-model="settings.titleShow" :label="true">显示标题</el-radio>
                <el-radio v-model="settings.titleShow" :label="false">不显示标题</el-radio>
              </el-form-item>
            </el-form>
          </el-row>
          <el-row>
            <el-form-item label="标题位置">
              <el-select v-model="settings.titlePosition" style="width: 100px;">
                <el-option label="顶部" value="top" />
                <el-option label="底部" value="bottom" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <!-- <el-select v-model="settings.titleAlign" style="width:100px">
                <el-option label="左对齐" value="left" />
                <el-option label="居中" value="center" />
                <el-option label="右对齐" value="right" />
              </el-select> -->
              <el-radio v-model="settings.titleAlign" label="left">左对齐</el-radio>
              <el-radio v-model="settings.titleAlign" label="center">居中</el-radio>
              <el-radio v-model="settings.titleAlign" label="right">右对齐</el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="标题高度">
              <el-input-number v-model="settings.titleHeight" style="width:100px" :min="1" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item v-if="settings.titleAlign !== 'right'" label="标题边距">
              <el-input v-model="settings.titlePaddingLeft" style="width: 100px">
                <template slot="prepend">
                  左
                </template>
              </el-input>
            </el-form-item>
            <el-form-item v-else label="标题边距">
              <el-input v-model="settings.titlePaddingRight" style="width: 100px">
                <template slot="prepend">
                  右
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-if="settings.titlePosition == 'top'" v-model="settings.titlePaddingTop" style="width: 100px">
                <template slot="prepend">
                  上
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-if="settings.titlePosition == 'bottom'" v-model="settings.titlePaddingBottom" style="width: 100px">
                <template slot="prepend">
                  下
                </template>
              </el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <template>
              <el-form-item label="主标题">
                <el-input v-model="staticSettings.mainTitle" style="width: 405px" />
              </el-form-item>
            </template>
          </el-row>
          <el-row>
            <el-form-item label="字体">
              <el-select v-model="staticSettings.mainTitleFont" style="width:100px">
                <el-option label="微软雅黑" value="Microsoft YaHei" />
                <el-option label="黑体" value="SimHei" />
                <el-option label="宋体" value="SimSun" />
                <el-option label="仿宋" value="FangSong" />
                <el-option label="楷体" value="KaiTi" />
              </el-select>
            </el-form-item>
            <el-form-item label="字号">
              <el-input-number v-model="staticSettings.mainTitleSize" style="width:100px" :min="1" />
            </el-form-item>
            <el-form-item label="颜色">
              <el-color-picker v-model="staticSettings.mainTitleColor" style="width:100px" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="副标题">
              <el-input v-model="staticSettings.subTitle" style="width: 405px" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="字体">
              <el-select v-model="staticSettings.subTitleFont" style="width:100px">
                <el-option label="微软雅黑" value="Microsoft YaHei" />
                <el-option label="黑体" value="SimHei" />
                <el-option label="宋体" value="SimSun" />
                <el-option label="仿宋" value="FangSong" />
                <el-option label="楷体" value="KaiTi" />
              </el-select>
            </el-form-item>
            <el-form-item label="字号">
              <el-input-number v-model="staticSettings.subTitleSize" style="width:100px" :min="1" />
            </el-form-item>
            <el-form-item label="颜色">
              <el-color-picker v-model="staticSettings.subTitleColor" style="width:100px" />
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template v-if="activeIndex == 'legend'">
        <el-form size="mini" inline label-width="120px"
                 style="text-align: left;"
                 :disabled="!settings.legendShow"
        >
          <el-row>
            <el-form>
              <el-form-item style="margin-left:55px">
                <el-radio v-model="settings.legendShow" :label="true">显示图例</el-radio>
                <el-radio v-model="settings.legendShow" :label="false">不显示图例</el-radio>
              </el-form-item>
              <el-form-item style="margin-left:55px">
                <el-radio v-model="staticSettings.labelLine" :label="true">显示引导线</el-radio>
                <el-radio v-model="staticSettings.labelLine" :label="false">不显示引导线</el-radio>
              </el-form-item>
            </el-form>
          </el-row>
          <el-row>
            <el-form-item label="图例位置">
              <el-select v-model="settings.legendPosition" style="width:100px">
                <el-option label="顶部" value="top" />
                <el-option label="底部" value="bottom" />
                <el-option label="左侧" value="left" />
                <el-option label="右侧" value="right" />
              </el-select>
            </el-form-item>
            <template v-if="(settings.legendPosition == 'top'||settings.legendPosition=='bottom')">
              <el-form-item>
                <el-radio v-model="settings.legendAlign" label="center">左右居中</el-radio>
                <el-radio v-model="settings.legendAlign" label="left">左对齐</el-radio>
                <el-radio v-model="settings.legendAlign" label="right">右对齐</el-radio>
              </el-form-item>
            </template>
            <template v-else>
              <el-form-item>
                <el-radio v-model="settings.legendAlign" label="center">上下居中</el-radio>
                <el-radio v-model="settings.legendAlign" label="top">顶端对齐</el-radio>
                <el-radio v-model="settings.legendAlign" label="bottom">底部对齐</el-radio>
              </el-form-item>
            </template>
          </el-row>
          <el-row>
            <el-form-item label="图例边距">
              <el-input v-model="settings.legendPaddingLeft" style="width: 100px">
                <template slot="prepend">
                  左
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="settings.legendPaddingRight" style="width: 100px">
                <template slot="prepend">
                  右
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="settings.legendPaddingTop" style="width: 100px">
                <template slot="prepend">
                  上
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="settings.legendPaddingBottom" style="width: 100px">
                <template slot="prepend">
                  下
                </template>
              </el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="图例字体">
              <el-select v-model="staticSettings.legendFont" style="width:100px">
                <el-option label="微软雅黑" value="Microsoft YaHei" />
                <el-option label="黑体" value="SimHei" />
                <el-option label="宋体" value="SimSun" />
                <el-option label="仿宋" value="FangSong" />
                <el-option label="楷体" value="KaiTi" />
              </el-select>
            </el-form-item>
            <el-form-item label="字号" label-width="80px">
              <el-input-number v-model="staticSettings.legendFontSize" style="width:100px" :min="1" />
            </el-form-item>
            <el-form-item label="颜色" label-width="80px">
              <el-color-picker v-model="staticSettings.legendFontColor" style="width:100px" />
            </el-form-item>
          </el-row>
          <el-row>
            <template v-if="(settings.legendPosition == 'top'||settings.legendPosition=='bottom')">
              <el-form-item label="图例大小">
                <el-input v-model="settings.legendHeight" style="width:100px">
                  <template slot="prepend">
                    高
                  </template>
                </el-input>
              </el-form-item>
            </template>
            <template v-else>
              <el-form-item label="图例大小">
                <el-input v-model="settings.legendWidth" style="width:100px">
                  <template slot="prepend">
                    宽
                  </template>
                </el-input>
              </el-form-item>
            </template>
          </el-row>
        </el-form>
      </template>
      <template v-if="activeIndex == 'pic'">
        <el-form size="mini" inline label-width="120px"
                 style="text-align: left;"
        >
          <!-- 柱状图 折线图 -->
          <template v-if="chartType == 'bar'||chartType == 'line'">
            <el-row>
              <el-form-item label="图形样式">
                <el-radio-group v-model="staticSettings.picStyle" @input="picStyleChange">
                  <template v-if="chartType == 'bar'">
                    <el-radio label="group">分组柱状图</el-radio>
                    <el-radio label="stack">堆叠柱状图</el-radio>
                  </template>
                  <template v-else-if="chartType == 'line'">
                    <el-radio label="line">折线图</el-radio>
                    <el-radio label="smooth">曲线图</el-radio>
                  </template>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="chartType == 'line'" label="显示面积">
                <el-checkbox v-model="staticSettings.lineArea" />
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="图形边距">
                <el-input v-model="settings.picPaddingLeft" style="width: 100px">
                  <template slot="prepend">
                    左
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="settings.picPaddingRight" style="width: 100px">
                  <template slot="prepend">
                    右
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="settings.picPaddingTop" style="width: 100px">
                  <template slot="prepend">
                    上
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="settings.picPaddingBottom" style="width: 100px">
                  <template slot="prepend">
                    下
                  </template>
                </el-input>
              </el-form-item>
            </el-row>
            <el-divider content-position="left">
              x轴设置
            </el-divider>
            <el-row v-if="chartType !== 'pie'">
              <el-form-item label="显示x轴">
                <el-checkbox v-model="staticSettings.xAxisShow" />
              </el-form-item>
              <el-form-item label="x轴刻度线">
                <el-checkbox v-model="staticSettings.xAxisAxisTick" :disabled="!staticSettings.xAxisShow" />
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="x轴字体">
                <el-select v-model="staticSettings.xAxisFont" style="width:100px">
                  <el-option label="微软雅黑" value="Microsoft YaHei" />
                  <el-option label="黑体" value="SimHei" />
                  <el-option label="宋体" value="SimSun" />
                  <el-option label="仿宋" value="FangSong" />
                  <el-option label="楷体" value="KaiTi" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input-number v-model="staticSettings.xAxisFontSize" style="width:100px" :min="1" />
              </el-form-item>
              <el-form-item label="颜色" label-width="50px">
                <el-color-picker v-model="staticSettings.xAxisFontColor" default-color="#fff" />
              </el-form-item>
              <el-form-item label="倾斜角度" label-width="80px">
                <el-input v-model="staticSettings.xAxisRotate" style="width:50px" />
              </el-form-item>
            </el-row>
            <el-divider content-position="left">
              y轴设置
            </el-divider>
            <el-row>
              <el-form-item label="显示y轴">
                <el-checkbox v-model="staticSettings.yAxisShow" />
              </el-form-item>
              <el-form-item label="y轴刻度线">
                <el-checkbox v-model="staticSettings.yAxisAxisTick" :disabled="!staticSettings.yAxisShow" />
              </el-form-item>
              <el-form-item label="网格线">
                <el-checkbox v-model="staticSettings.yAxisSplitLine" :disabled="!staticSettings.yAxisShow" />
              </el-form-item>
              <el-form-item label="网格线颜色">
                <el-color-picker v-model="staticSettings.splitLineColor" :disabled="!staticSettings.yAxisShow" default-color="#ccc" />
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="y轴字体">
                <el-select v-model="staticSettings.yAxisFont" style="width:100px">
                  <el-option label="微软雅黑" value="Microsoft YaHei" />
                  <el-option label="黑体" value="SimHei" />
                  <el-option label="宋体" value="SimSun" />
                  <el-option label="仿宋" value="FangSong" />
                  <el-option label="楷体" value="KaiTi" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input-number v-model="staticSettings.yAxisFontSize" style="width:100px" :min="1" />
              </el-form-item>
              <el-form-item label="颜色" label-width="62px">
                <el-color-picker v-model="staticSettings.yAxisFontColor" default-color="#fff" />
              </el-form-item>
            </el-row>
            <el-divider content-position="left">
              数值设置
            </el-divider>
            <el-row>
              <el-form-item label="显示数值">
                <el-checkbox v-model="staticSettings.label" />
              </el-form-item>
              <el-form-item label="数值字体">
                <el-select v-model="staticSettings.numFont" style="width:100px" :disabled="!staticSettings.label">
                  <el-option label="微软雅黑" value="Microsoft YaHei" />
                  <el-option label="黑体" value="SimHei" />
                  <el-option label="宋体" value="SimSun" />
                  <el-option label="仿宋" value="FangSong" />
                  <el-option label="楷体" value="KaiTi" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input-number v-model="staticSettings.numFontSize" style="width:100px" :min="1" :disabled="!staticSettings.label" />
              </el-form-item>
              <el-form-item label="颜色" label-width="62px">
                <el-color-picker v-model="staticSettings.numFontColor" default-color="#fff" :disabled="!staticSettings.label" />
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="显示最大值">
                <el-checkbox v-model="staticSettings.maxPoint" />
              </el-form-item>
              <el-form-item label="显示最小值">
                <el-checkbox v-model="staticSettings.minPoint" />
              </el-form-item>
              <el-form-item label="显示平均线">
                <el-checkbox v-model="staticSettings.averageLine" />
              </el-form-item>
            </el-row>
          </template>
          <!-- 饼图 -->
          <template v-else>
            <el-row>
              <el-form-item label="图形样式">
                <el-radio-group v-model="staticSettings.picStyle" @input="picStyleChange">
                  <el-radio label="pie">饼图</el-radio>
                  <el-radio label="circle">圆环图</el-radio>
                  <el-radio label="rose">玫瑰图</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="图形半径">
                <el-input v-model="staticSettings.radiusOutside" style="width:100px">
                  <template slot="prepend">
                    外
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="staticSettings.radiusInside" style="width:100px">
                  <template slot="prepend">
                    内
                  </template>
                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="圆心位置">
                <el-input v-model="staticSettings.centerPositionX" style="width:100px">
                  <template slot="prepend">
                    X
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="staticSettings.centerPositionY" style="width:100px">
                  <template slot="prepend">
                    Y
                  </template>
                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="图形边距">
                <el-input-number v-model="staticSettings.picPadding" style="width:100px" :min="0" @change="picPaddingChange" />
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="图例显示数值">
                <el-radio v-model="staticSettings.legendShowNum" label="statistic">统计值</el-radio>
                <el-radio v-model="staticSettings.legendShowNum" label="percentage">百分比</el-radio>
                <el-radio v-model="staticSettings.legendShowNum" label="statistic-percentage">统计值(百分比)</el-radio>
                <el-radio v-model="staticSettings.legendShowNum" label="none">不显示</el-radio>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="引导线显示数值">
                <el-radio v-model="staticSettings.lineShowNum" label="statistic">统计值</el-radio>
                <el-radio v-model="staticSettings.lineShowNum" label="percentage">百分比</el-radio>
                <el-radio v-model="staticSettings.lineShowNum" label="statistic-percentage">统计值(百分比)</el-radio>
                <el-radio v-model="staticSettings.lineShowNum" label="none">不显示</el-radio>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="字体">
                <el-select v-model="staticSettings.numFont" style="width:100px">
                  <el-option label="微软雅黑" value="Microsoft YaHei" />
                  <el-option label="黑体" value="SimHei" />
                  <el-option label="宋体" value="SimSun" />
                  <el-option label="仿宋" value="FangSong" />
                  <el-option label="楷体" value="KaiTi" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input-number v-model="staticSettings.numFontSize" style="width:100px" :min="1" />
              </el-form-item>
              <el-form-item label="颜色" label-width="62px">
                <el-color-picker v-model="staticSettings.numFontColor" default-color="#fff" />
              </el-form-item>
            </el-row>
            <el-row v-if="staticSettings.picStyle !== 'pie'">
              <el-form-item label="内圆显示总数">
                <el-checkbox v-model="staticSettings.showTotal" />
              </el-form-item>
              <el-form-item>
                <el-input-number v-model="staticSettings.numFontSizeInside" style="width:100px" :min="1" />
              </el-form-item>
            </el-row>
          </template>
        </el-form>
      </template>
      <div slot="footer">
        <el-button size="small" @click="hide">关 闭</el-button>
        <el-button size="small" @click="preview">预 览</el-button>
        <el-button size="small" @click="saveSettings">保 存</el-button>
      </div>
    </el-dialog>
    <div>
      <!-- <transition name="fade">
        <div v-show="showPanel" class="setting-panel">

        </div>
      </transition> -->
    </div>
  </div>    
  <template #footer>
      <a-space>
        <a-button size="middle" @click="closeModal">\{{ t('取消') }}</a-button>
        <a-button size="middle" type="primary" :loading="confirmLoading" @click="handleSubmit()">
          \{{t('保存')}}
          </a-button>
      </a-space>
    </template>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { queryDropDownBox } from '/@/api/iesd/styleanalysiss';
  import { getDictTypeList } from '/@/api/system/dict';
  import { useI18n } from '/@/hooks/web/useI18n';
  const title = ref<string>('修改部件');
  const confirmLoading = ref<boolean>(false);
  const { t } = useI18n();
  const emits = defineEmits(['success']);
  const schemas: FormSchema[] = [
    {
      field: 'analysisId',
      label: t('分析类型'),
      component: 'Select',
      componentProps: {
        placeholder: t('请选择'),
      },
      colProps: { span: 7 },
    },
    {
      field: 'styleExplain',
      label: t('款说明'),
      component: 'Select',
      componentProps: {
        placeholder: t('请选择'),
      },
      colProps: { span: 7 },
    },
    {
      field: 'sectionSewingSam',
      label: '车缝SAM',
      component: 'InputNumber',
      componentProps: {
        placeholder: t('请输入'),
      },
      colProps: { span: 4 },
    },
    {
      field: 'noSewingSam',
      label: t('无缝SAM'),
      component: 'InputNumber',
      componentProps: {
        placeholder: t('请输入'),
      },
      colProps: { span: 6 },
    },
    {
      field: 'sampleId',
      label: t('样衣类型'),
      component: 'Select',
      componentProps: {
        placeholder: t('请选择'),
      },
      colProps: { span: 7 },
    },
  ];

  const [registerModal, { setModalProps, closeModal }] = useModalInner(
    async (params: { formStatus: 'add' | 'update'; record: Recordable }) => {
      resetFields();
      const { formStatus } = params;
      if (formStatus == 'add') {
        title.value = '新增在线图表';
      } else {
        title.value = '更新在线图表';
      }
    // let customers = await getSysCustomerList();
    let dropDownValues = await queryDropDownBox();
    let styleExplainList = await getDictTypeList({ dictCode: 'style_explain_code' });
    // TODO: 客户名称 暂时不需要
    // dropDownValues.customerList = customers.List

    const { analysisList, sampleList } = dropDownValues;
    // 下拉框赋值
    updateSchema([
      {
        field: 'styleExplain',
        componentProps: {
          options: styleExplainList.map((item) => {
            return { value: item.id, label: item.dictName };
          }),
          showSearch: true,
          filterOption(input: string, option: any) {
            return option.label.indexOf(input) >= 0;
          },
        },
      },
      {
        field: 'analysisId',
        componentProps: {
          options: analysisList.map((item) => {
            return { value: item.id, label: item.analysisName };
          }),
          showSearch: true,
          filterOption(input: string, option: any) {
            return option.label.indexOf(input) >= 0;
          },
        },
      },
      {
        field: 'sampleId',
        componentProps: {
          options: sampleList.map((item) => {
            return { value: item.id, label: item.sampleName };
          }),
          showSearch: true,
          filterOption(input: string, option: any) {
            return option.label.indexOf(input) >= 0;
          },
        },
      },
    ]);
    setModalProps({ loading: false });
  });
  const [registerForm, { updateSchema, getFieldsValue, resetFields }] = useForm({
    labelWidth: 80,
    schemas,
    showActionButtonGroup: false,
    layout: 'horizontal',
  });

  async function handleSubmit() {
    confirmLoading.value = true;
    const formValues = getFieldsValue();
    resetFields();
    confirmLoading.value = false;

    closeModal();
    emits('success', formValues);
  }
</script>
